﻿@model FinanceChecker.DataTransferObject.ExpenseViewModel
<style>
    .table {
        --bs-table-color: var(--bs-gray-600);
        --bs-table-bg: var(--bs-gray-100);
        --bs-table-border-color: transparent;
    }
</style>
<div class="container mt-4">
    <div class="row">
        <div class="col-lg-6">
            <div class="card mb-4">
                <div class="card-body">
                    <h1 class="card-title">Expense Tracking</h1>
                    <div class="row">
                        <div class="col-md-6">
                            <h2>Current Week Total: £@Model.CurrentWeekTotal.ToString("N2")</h2>
                            <h2>Current Month Total: £@Model.CurrentMonthTotal.ToString("N2")</h2>
                        </div>
                        <div class="col-md-6">
                            <h2>Previous Week Total: £@Model.PreviousWeekTotal.ToString("N2")</h2>
                            <h2>Previous Month Total: £@Model.PreviousMonthTotal.ToString("N2")</h2>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card mb-4">
                <div class="card-body">
                    <h2>Total Monthly Spent per Category</h2>
                    <table class="table table-striped">
                        <thead>
                            <tr>
                                <th>Category</th>
                                <th>Total Spent</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach (var item in Model.CategoryMonthlySpent)
                            {
                                <tr>
                                    <td>@item.Key</td>
                                    <td>£@item.Value.ToString("N2")</td>
                                </tr>
                            }
                        </tbody>
                    </table>
                </div>
            </div>

            <div class="card mb-4">
                <div class="card-body">
                    <h2>Total Weekly Spent per Category</h2>
                    <table class="table table-striped">
                        <thead>
                            <tr>
                                <th>Category</th>
                                <th>Total Spent</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach (var item in Model.CategoryWeeklySpent)
                            {
                                <tr>
                                    <td>@item.Key</td>
                                    <td>£@item.Value.ToString("N2")</td>
                                </tr>
                            }
                        </tbody>
                    </table>
                </div>
            </div>

            <div class="card mb-4">
                <div class="card-body">
                    <h2>Previous Week Spent per Category</h2>
                    <table class="table table-striped">
                        <thead>
                            <tr>
                                <th>Category</th>
                                <th>Total Spent</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach (var item in Model.CategoryPreviousWeekSpent)
                            {
                                <tr>
                                    <td>@item.Key</td>
                                    <td>£@item.Value.ToString("N2")</td>
                                </tr>
                            }
                        </tbody>
                    </table>
                </div>
            </div>

            <div class="card mb-4">
                <div class="card-body">
                    <h2>Previous Month Spent per Category</h2>
                    <table class="table table-striped">
                        <thead>
                            <tr>
                                <th>Category</th>
                                <th>Total Spent</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach (var item in Model.CategoryPreviousMonthSpent)
                            {
                                <tr>
                                    <td>@item.Key</td>
                                    <td>£@item.Value.ToString("N2")</td>
                                </tr>
                            }
                        </tbody>
                    </table>
                </div>
            </div>



            <div class="card mb-4">
                <div class="card-body">
                    <h2>Compare Previous Months</h2>
                    <table class="table table-striped">
                        <thead>
                            <tr>
                                <th>Month</th>
                                <th>Total Spent</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach (var item in Model.ComparePreviousMonths)
                            {
                                <tr>
                                    <td>@item.Key</td>
                                    <td>£@item.Value.ToString("N2")</td>
                                </tr>
                            }
                        </tbody>
                    </table>
                </div>
            </div>

            <div class="card mb-4">
                <div class="card-body">
                    <h2>Compare Previous Weeks</h2>
                    <table class="table table-striped">
                        <thead>
                            <tr>
                                <th>Week Number</th>
                                <th>Total Spent</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach (var item in Model.ComparePreviousWeeks)
                            {
                                <tr>
                                    <td>Previous @item.Key</td>
                                    <td>£@item.Value.ToString("N2")</td>
                                </tr>
                            }
                        </tbody>
                    </table>
                </div>
            </div>

        </div>

        <div class="col-lg-6">
            <br />
            <div>
                <h2>Total Monthly Spent per Category (Pie Chart)</h2>
                <canvas id="totalMonthlySpentPieChart" width="100%" height="300"></canvas>
            </div>
            <br />
            <div>
                <h2>Weekly Spent per Category (Bar Chart)</h2>
                <canvas id="weeklySpentBarChart" width="100%" height="100"></canvas>
            </div>
            <br />
            <div>
                <h2>Monthly Spent per Category (Bar Chart)</h2>
                <canvas id="monthlySpentBarChart" width="100%" height="100"></canvas>
            </div>
            <br />
            <h2>Comparison: Previous Month vs. Current Month (Line Chart)</h2>
            <canvas id="monthlyComparisonLineChart" width="100%" height="100"></canvas>
            <br />
            <h2>Comparison: Previous Week vs. Current Week (Line Chart)</h2>
            <canvas id="weeklyComparisonLineChart" width="100%" height="100"></canvas>
        </div>
    </div>
</div>

@section scripts {
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

    <script>
        // Data for the pie chart
        var categoryMonthlySpent = @Html.Raw(Json.Serialize(Model.CategoryMonthlySpent));

        var pieChartData = {
            labels: Object.keys(categoryMonthlySpent), // Category names as labels
            datasets: [{
                data: Object.values(categoryMonthlySpent), // Total spent values for each category
                backgroundColor: getRandomColors(Object.keys(categoryMonthlySpent).length)
            }]
        };

        // Function to generate random colors for the pie chart
        function getRandomColors(count) {
            var colors = [];
            for (var i = 0; i < count; i++) {
                colors.push(getRandomColor());
            }
            return colors;
        }

        function getRandomColor() {
            var letters = '0123456789ABCDEF';
            var color = '#';
            for (var i = 0; i < 6; i++) {
                color += letters[Math.floor(Math.random() * 16)];
            }
            return color;
        }

        // Create the pie chart
        var totalMonthlySpentPieChart = new Chart('totalMonthlySpentPieChart', {
            type: 'pie',
            data: pieChartData,
            options: {
                responsive: true,
                plugins: {
                    legend: {
                        position: 'top'
                    },
                    title: {
                        display: true,
                        text: 'Total Monthly Spent per Category'
                    }
                }
            }
        });

        // Data for the bar charts
        var weeks = Object.keys(@Html.Raw(Json.Serialize(Model.ComparePreviousWeeks)));
        var weeklySpentValues = Object.values(@Html.Raw(Json.Serialize(Model.ComparePreviousWeeks)));

        var monthlyLabels = Object.keys(@Html.Raw(Json.Serialize(Model.ComparePreviousMonths)));
        var monthlySpentValues = Object.values(@Html.Raw(Json.Serialize(Model.ComparePreviousMonths)));

        var weeklyChartData = {
            labels: weeks,
            datasets: [{
                label: 'Weekly Total Spent',
                data: weeklySpentValues,
                backgroundColor: 'rgba(54, 162, 235, 0.5)',
                borderColor: 'rgba(54, 162, 235, 1)',
                borderWidth: 1
            }]
        };

        var monthlyChartData = {
            labels: monthlyLabels,
            datasets: [{
                label: 'Monthly Total Spent',
                data: monthlySpentValues,
                backgroundColor: 'rgba(75, 192, 192, 0.5)',
                borderColor: 'rgba(75, 192, 192, 1)',
                borderWidth: 1
            }]
        };

        // Create the weekly and monthly bar charts
        var weeklySpentBarChart = new Chart('weeklySpentBarChart', {
            type: 'bar',
            data: weeklyChartData,
            options: {
                responsive: true,
                plugins: {
                    legend: {
                        position: 'top'
                    },
                    title: {
                        display: true,
                        text: 'Weekly Spent per Category'
                    }
                },
                scales: {
                    x: {
                        title: {
                            display: true,
                            text: 'Category'
                        }
                    },
                    y: {
                        beginAtZero: true,
                        ticks: {
                            callback: function (value, index, values) {
                                return '£' + value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
                            }
                        },
                        title: {
                            display: true,
                            text: 'Amount'
                        }
                    }
                }
            }
        });

        var monthlySpentBarChart = new Chart('monthlySpentBarChart', {
            type: 'bar',
            data: monthlyChartData,
            options: {
                responsive: true,
                plugins: {
                    legend: {
                        position: 'top'
                    },
                    title: {
                        display: true,
                        text: 'Monthly Spent per Category'
                    }
                },
                scales: {
                    x: {
                        title: {
                            display: true,
                            text: 'Category'
                        }
                    },
                    y: {
                        beginAtZero: true,
                        ticks: {
                            callback: function (value, index, values) {
                                return '£' + value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
                            }
                        },
                        title: {
                            display: true,
                            text: 'Amount'
                        }
                    }
                }
            }
        });

        // Function to get the labels for the line charts
        function getLabelsForMonths(count) {
            var currentDate = new Date();
            var labels = [];

            for (var i = count - 1; i >= 0; i--) {
                var startOfCurrentMonth = new Date(currentDate.getFullYear(), currentDate.getMonth() - i, 1);
                labels.push(startOfCurrentMonth.toLocaleString('default', { month: 'short', year: 'numeric' }));
            }

            return labels;
        }



        var currentYear = new Date().getFullYear(); // Get the current year


        function getLabelsForWeeks(weeksCount) {
            var currentDate = new Date(); // Get the current date
            var currentYear = currentDate.getFullYear(); // Get the current year
            var currentWeek = getWeekNumber(currentDate); // Get the current week number

            var labels = [];
            for (var i = 0; i < weeksCount; i++) {
                var weekLabel = 'Week ' + currentWeek + ', ' + currentYear;
                labels.push(weekLabel);
                // Decrement the week number for the previous weeks
                currentWeek = (currentWeek === 1) ? 12 : currentWeek - 1;
                // Decrement the year if the current week is 12 and it's the beginning of the year
                if (currentWeek === 12 && currentDate.getMonth() === 0) {
                    currentYear--;
                }
            }

            return labels.reverse();
        }

        function getWeekNumber(date) {
            var target = new Date(date.valueOf());
            var dayNr = (date.getDay() + 6) % 7;
            target.setDate(target.getDate() - dayNr + 3);
            var firstThursday = target.valueOf();
            target.setMonth(0, 1);
            if (target.getDay() !== 4) {
                target.setMonth(0, 1 + ((4 - target.getDay()) + 7) % 7);
            }
            return 1 + Math.ceil((firstThursday - target) / 604800000); // 604800000 ms = 7 * 24 * 3600 * 1000
        }


         // Data for the line charts
        var months = getLabelsForMonths(12); // Get labels for the last 12 months, including the current month
        var monthlyPreviousSpentValues = Object.values(@Html.Raw(Json.Serialize(Model.ComparePreviousMonths)));
        var monthlyCurrentSpentValues = Object.values(@Html.Raw(Json.Serialize(Model.CategoryMonthlySpent)));

var weeks = getLabelsForWeeks(12); // Get labels for 12 weeks (July 2022 to July 2023)
var weeklyPreviousSpentValues = @Html.Raw(Json.Serialize(Model.ComparePreviousWeeks.Values)); // Assuming the model has a property "ComparePreviousWeeks" containing the weekly data
var weeklyCurrentSpentValues = Object.values(@Html.Raw(Json.Serialize(Model.CategoryWeeklySpent)));

        var monthlyComparisonChartData = {
            labels: months,
            datasets: [
                {
                    label: 'Previous Month',
                    data: monthlyPreviousSpentValues,
                    borderColor: 'rgba(255, 99, 132, 1)',
                    borderWidth: 2,
                    fill: false
                },
                {
                    label: 'Current Month',
                    data: monthlyCurrentSpentValues,
                    borderColor: 'rgba(54, 162, 235, 1)',
                    borderWidth: 2,
                    fill: false
                }
            ]
        };

        var weeklyComparisonChartData = {
            labels: weeks,
            datasets: [
                {
                    label: 'Previous Week',
                    data: weeklyPreviousSpentValues,
                    borderColor: 'rgba(255, 99, 132, 1)',
                    borderWidth: 2,
                    fill: false
                },
                {
                    label: 'Current Week',
                    data: weeklyCurrentSpentValues,
                    borderColor: 'rgba(54, 162, 235, 1)',
                    borderWidth: 2,
                    fill: false
                }
            ]
        };

        // Create the line chart for comparing previous vs current months
        var monthlyComparisonLineChart = new Chart('monthlyComparisonLineChart', {
            type: 'line',
            data: monthlyComparisonChartData,
            options: {
                responsive: true,
                plugins: {
                    legend: {
                        position: 'top'
                    },
                    title: {
                        display: true,
                        text: 'Comparison: Previous Month vs. Current Month'
                    }
                },
                scales: {
                    x: {
                        title: {
                            display: true,
                            text: 'Month'
                        }
                    },
                    y: {
                        beginAtZero: true,
                        ticks: {
                            callback: function (value, index, values) {
                                return '£' + value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
                            }
                        },
                        title: {
                            display: true,
                            text: 'Amount'
                        }
                    }
                }
            }
        });

        var weeklyComparisonLineChart = new Chart('weeklyComparisonLineChart', {
            type: 'line',
            data: weeklyComparisonChartData,
            options: {
                responsive: true,
                plugins: {
                    legend: {
                        position: 'top'
                    },
                    title: {
                        display: true,
                        text: 'Comparison: Previous Week vs. Current Week'
                    }
                },
                scales: {
                    x: {
                        title: {
                            display: true,
                            text: 'Week'
                        }
                    },
                    y: {
                        beginAtZero: true,
                        ticks: {
                            callback: function (value, index, values) {
                                return '£' + value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
                            }
                        },
                        title: {
                            display: true,
                            text: 'Amount'
                        }
                    }
                }
            }
        });
    </script>
}
<br />
<br />

